import { FolderFilled, FolderOutlined, SearchOutlined } from '@ant-design/icons';
import Image from 'next/image'
import React from 'react';

interface Message {
    id: number;
    message: string;
    time: string;
    isMe: boolean;
    sender: string;
}
interface MessageModel {
    id: number;
    name: string;
    isOnline?: boolean;
    previewMessage: string;
    time: string;
    avatar: string;
    messages?: Array<Message>;
}

export default function Chat() {
    const [currentChat, setCurrentChat] = React.useState<MessageModel>();

    let messages: Array<MessageModel> = [
        {
            id: 1,
            name: "John Doe",
            isOnline: true,
            previewMessage: "Hello, how are you?",
            time: "10:00 AM",
            avatar: "/aaa.png",
            messages: [
                {
                    id: 1,
                    message: "Hello, how are you?",
                    time: "10:00 AM",
                    isMe: false,
                    sender: "John Doe"
                },
                {
                    id: 2,
                    message: "I'm fine, thank you. And you?",
                    time: "10:02 AM",
                    isMe: true,
                    sender: "wosperry"
                },
                {
                    id: 3,
                    message: "Good to hear that. Anyway, how's your project going?",
                    time: "10:05 AM",
                    isMe: false,
                    sender: "John Doe"
                },
                {
                    id: 4,
                    message: "It's doing great. I'm working on the UI right now. but I'm having some trouble with the responsive layout. Any way you can help me with that?",
                    time: "10:06 AM",
                    isMe: true,
                    sender: "wosperry"
                },
                {
                    id: 5,
                    message: "Sure, send me the code and I'll take a look.",
                    time: "10:07 AM",
                    isMe: false,
                    sender: "John Doe"

                },
                {
                    id: 6,
                    message: "Okay, just a sec.",
                    time: "10:08 AM",
                    isMe: true,
                    sender: "wosperry"
                },
                {
                    id: 7,
                    message: "Here it is.",
                    time: "10:09 AM",
                    isMe: true,

                    sender: "wosperry"
                },
                {
                    id: 8,
                    message: "Okay, let me take a look.",
                    time: "10:10 AM",
                    isMe: false,
                    sender: "John Doe"
                },

            ]
        },
        {
            id: 2,
            name: "Jason Bourne",
            previewMessage: "Hello, how are you?",
            time: "10:00 AM",
            avatar: "/aaa.png"
        },

        {
            id: 3,
            name: "Bruno Mars",
            previewMessage: "Hello, how are you?",
            time: "10:00 AM",
            avatar: "/aaa.png"
        },

        {
            id: 4,
            name: "Michael Jackson",
            previewMessage: "Hello, how are you?",
            time: "10:00 AM",
            avatar: "/aaa.png"
        },

        {
            id: 5,
            name: "Steve Jobs",
            previewMessage: "Hello, how are you?",
            time: "10:00 AM",
            avatar: "/aaa.png"
        },
        {
            id: 6,
            name: "Mark Zuckerberg",
            previewMessage: "Hello, how are you?",
            time: "10:00 AM",
            avatar: "/aaa.png"
        },
    ];

    return <div className="w-full h-full flex">
        <div className="bg-white w-80 h-full flex flex-col py-4 space-y-4 border-r">
            <div className="text-lg font-bold px-4">Messages</div>
            <label className="relative block  px-4">
                <SearchOutlined className="absolute m-3" />
                <input autoComplete='off' className="placeholder:italic placeholder:text-gray-500 block bg-gray-200 text-gray-500 w-full border  rounded-xl py-2 pl-9 pr-3 shadow-sm focus:outline-none  sm:text-sm" placeholder="Search ..." type="text" name="search" />
            </label>
            <div>
                {messages.map((message) => {
                    return <div className={`flex items-center space-x-2 select-none hover:bg-gray-100 transition duration-100 cursor-pointer px-4 ${currentChat?.id === message.id ? "bg-gray-100" : ""}`}
                        onClick={() => setCurrentChat(message)}
                    >
                        <Image
                            className="rounded-full"
                            src={message.avatar}
                            alt="Next.js Logo"
                            width={36}
                            height={36}
                            priority
                        />
                        <div className="flex-1 p-2">
                            <div className="flex items-center justify-between">
                                <div className="font-bold">{message.name}</div>
                                <div className="text-xs text-gray-500">{message.time}</div>
                            </div>
                            <div className="text-sm text-gray-500">{message.previewMessage}</div>
                        </div>

                    </div>
                })}
            </div>
        </div>

        <div className=" flex-1  w-60 h-full">
            <div className="flex flex-col items- h-full bg-white">
                <div className="flex px-4 py-2 border-b ">
                    <div className=" flex-1 flex items-center">
                        {currentChat && <div className="flex flex-row items-center">
                            <Image
                                className="rounded-full mx-2"
                                src={currentChat.avatar}
                                alt="Next.js Logo"
                                width={40}
                                height={40}
                                priority
                            />
                            <div className="ml-2 p-1 font-bold flex flex-col justify-between ">
                                <div className="text-xl">{currentChat.name}</div>
                                <div className="text-sm text-green-600">{
                                    <div>{currentChat.isOnline}</div> &&
                                    <div>Online</div>
                                }</div>
                            </div>
                        </div>}
                    </div>
                    <div className=" flex-1"></div>
                </div>
                <div className="flex-1 overflow-y-auto p-4 pt-12 space-y-12">
                    {currentChat?.messages?.map((message) => {
                        return <div className={`flex items-start justify text-sm ${message.isMe ? "flex-row-reverse items-end" : "flex-row"}`}>
                            {message.isMe ? "" : <Image
                                className={`rounded-full mx-2 ${message.isMe ? "translate-y-4" : "-translate-y-4"}`}
                                src={currentChat.avatar}
                                alt="Next.js Logo"
                                width={40}
                                height={40}
                                priority
                            />}
                            <div className={`p-4 px-6 rounded-3xl flex flex-col justify-between ${message.isMe ? "bg-gray-100 rounded-br-none items-end" : "bg-gray-100 rounded-tl-none items-start"}`}>
                                <div className="">{message.message}</div>
                                <div className="text-sm text-gray-400 select-none">{message.time}</div>
                            </div>
                            <Image className={` opacity-0 rounded-full mx-2 ${message.isMe ? "translate-y-4" : "-translate-y-4"}`}
                                src={currentChat.avatar}
                                alt="Next.js Logo"
                                width={40}
                                height={40}
                                priority
                            />
                        </div>
                    })}
                </div>
                <div className="flex flex-row items-center space-x-4 p-2 px-6 border-t">
                    <FolderFilled className=" text-gray-500 hover:text-yellow-600 cursor-pointer hover:scale-125 transition duration-200" />
                    <input className="py-2 px-4 rounded-xl bg-gray-100 focus:outline-none flex-1"
                        placeholder='Type message here...'
                    />
                    <span className="transition duration-200 cursor-pointer px-4 py-2 rounded-xl bg-green-100 text-green-600 select-none font-bold hover:text-white hover:bg-green-600 hover:shadow-2xl active:bg-green-500 active:shadow-none">Send Message</span>
                </div>
            </div>
        </div>
    </div>
}
